<script setup>
import { ref } from 'vue'
import {ElMessageBox,ElMessage} from 'element-plus'

const passwordData = ref({
  oldPwd: '',
  newPwd: '',
  rePwd: '',
})

// 函数的顺序很和重要
// 密码校验
const isEqualNewPassword = (rule, value, callback) => {
  if (value == '') {
    callback(new Error('请再次输入密码'))
    // 响应式数据要先.value
  } else if (passwordData.value.newPwd != value) {
    callback(new Error(`两次输入密码不同`))
  } else {
    callback()
  }
  return
}
const rules = {
  newPwd: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    {  required: true, min: 6, max: 15, message: '长度应在6-15', trigger: 'blur' },
  ],
  rePwd: [
   { required: true, message: ' 请再次输入密码', trigger: 'blur' },
   { required: true, validator : isEqualNewPassword, message: ' 两次输入密码不一致', trigger: 'blur' },
  ],
}



const reset = () => {
  passwordData.value = {}
}

// 提交信息
import { updatePasswordService } from '../../api/user';
import {useTokenStore} from '../../stores/token'
import {useUserInfoStore} from '../../stores/userInfo'
import {useRouter} from 'vue-router'
const tokenStore  = useTokenStore()
const userInfoStore = useUserInfoStore()
const router = useRouter()
const onSubmit = () => {
  ElMessageBox.confirm(
    '主人，您确定信息是正确的吗',
    '来自音音尧尧的提示',
    {
      confirmButtonText: '是的',
      cancelButtonText: '不是的',
      type: 'warning',
    }
  )
    .then(async () => {
      let res = await updatePasswordService(passwordData.value)
      tokenStore.removeToken()
      userInfoStore.removeInfo()
      ElMessage({
        type: 'success',
        message: '好的主人，密码已更改，请重新登录吧',
      })
      router.push('/login')
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: res.message ? res.message : '已经取消了哟',
      })
    })
}
</script>
<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>主人，请修改密码</span>
      </div>
    </template>

    <div>
      <el-row>
        <el-col :span="16">
          <el-form :model="passwordData" label-width="100px" :rules="rules" @keydown.enter="onSubmit()">
            <el-form-item label="原密码">
              <el-input v-model="passwordData.oldPwd" type='password' show-password/>
            </el-form-item>
            <el-form-item label="新密码" prop="newPwd" >
              <el-input v-model="passwordData.newPwd" type='password' show-password/>
            </el-form-item>
            <el-form-item label="请再输一遍" prop="rePwd">
              <el-input v-model="passwordData.rePwd" type='password' show-password/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit()">提交</el-button>
              <el-button  @click="reset()">重设</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<style lang="scss" scoped>
$width: 960px;
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: $width;
}
</style>
